<template>
  <!-- 地区任务分发弹窗 -->
  <el-dialog
    title="确认驳回"
    width="420px"
    :visible.sync="showTask"
    :close-on-click-modal="false"
    @close="handleClose"
    :modal-append-to-body="false"
    class="tipDialog"
  >
    <p class="warningInfo">
      <i class="el-icon-warning warningIcon"></i>
      <span class="warningText">请填写驳回原因，以便及时调整工资表。</span>
    </p>
    <el-form :model="form" :rules="rules" ref="formData">
      <el-form-item label="驳回原因" label-width="100px" prop="reason">
        <el-input
          type="textarea"
          rows="3"
          v-model="form.reason"
          placeholder="请输入驳回原因"
        ></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button class="cancel" @click="handleClose">取消</el-button>
      <el-button
        type="primary"
        class="save"
        :loading="taskLoading"
        @click="submit"
        >确定</el-button
      >
    </div>
  </el-dialog>
</template>
<script>
export default {
  data() {
    return {
      loading: false,
      taskLoading: false,
      showTask: false,
      id: '',
      form: {
        reason: '',
      },
      rules: {
        reason: [
          { required: true, trigger: 'blur', message: '请输入驳回原因' },
          { max: 200, trigger: 'blur', message: '最多输入200个汉字' },
        ],
      },
    }
  },
  props: {
    showTaskProp: { type: Boolean, default: false },
    salaryId: { type: String, default: '' },
  },
  watch: {
    showTaskProp(val) {
      this.showTask = val
    },
  },
  methods: {
    handleClose(index) {
      this.$refs['formData'].resetFields()
      if (this.showTask) {
        this.showTask = false
      }
      this.$emit('callback', {
        success: index == 1 ? true : false,
        reason: this.form.reason,
      })
    },
    submit() {
      this.$refs.formData.validate((valid) => {
        if (valid) {
          let params = {
            salaryId: this.salaryId,
            status: 'NO',
            rejectReason: this.form.reason,
          }
          this.axios
            .post('api-su/cs/salary/expand/audit', params)
            .then((res) => {
              if (!res.data.hasError) {
                this.$message({
                  type: 'success',
                  message: '操作成功',
                })
                this.$emit('getStatusQuery', res.data.result, this.form.reason)
                this.isLoading = false
                this.handleClose(1)
              } else {
                this.$message({
                  type: 'warning',
                  message: res.data.errorMsg,
                })
                this.isLoading = false
              }
            })
        }
      })
    },
  },
}
</script>
<style lang="less" scoped>
.warningInfo {
  background: #fffbe6;
  height: 36px;
  padding-left: 48px;
  position: relative;
  .warningIcon {
    color: orange;
    font-size: 20px;
    position: absolute;
    top: 8px;
    left: 20px;
  }
  .warningText {
    font-family: 'SourceHanSansCN-Regular';
    font-size: 14px;
    color: #ff4d4a;
    line-height: 36px;
  }
}
/deep/.el-dialog__body {
  padding: 0 0 0 0;
}
.el-form {
  padding: 20px 24px;
}
</style>
